<template>
  <div class="home">
    <van-nav-bar
      title="常用投保人"
      left-arrow
      @click-left="onClickLeft"
      right-text="新增"
      @click-right="onClickRight"
    >
      <!-- <van-icon name="search" slot="right" /> -->
    </van-nav-bar>
    <van-search
      v-model="value"
      :show-action="showAction"
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
      @focus="onFocus"
    />
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      success-text="刷新成功"
    >
      <van-tabs
        type="card"
        v-model="active"
        color="#1989fa"
        style="margin-top: 16px"
      >
        <van-tab title="投保人" style="padding: 16px">
          <van-cell-group
            class="account-info"
            style="margin-top: 10px"
            v-for="(item, index) in applicantList"
            :key="index"
          >
            <van-cell :title="item.insureName" value="" />
            <van-cell
              title="证件类型"
              :value="
                item.insureCertificateType * 1 === 1
                  ? '身份证'
                  : '统一社会信用代码'
              "
            />
            <van-cell title="证件号码" :value="item.insureCertificateNumber" />
            <van-cell title="联系人" :value="item.contactName" />
            <van-cell title="联系电话" :value="item.contactPhone" />
            <!-- <van-cell title="收货人" :value="item.consigneeName" />
            <van-cell title="收货电话" :value="item.consigneePhone" />
            <van-cell title="收货地址" :value="item.consigneeAddress" /> -->
            <van-row>
              <van-col span="24">
                <div style="float: right; margin: 16px 14px 16px 0">
                  <van-button
                    size="small"
                    type="info"
                    style="margin-right: 5px"
                    @click="toEditAccount(item)"
                    >编辑</van-button
                  >
                  <van-button size="small" @click="delInsure(item)"
                    >删除</van-button
                  >
                </div>
              </van-col>
            </van-row>
          </van-cell-group>
          <van-empty
            v-if="!applicantList.length"
            image="search"
            description="暂无数据"
          />
        </van-tab>
        <van-tab title="被保险人" style="padding: 16px">
          <van-cell-group
            class="account-info"
            style="margin-top: 10px"
            v-for="(item, index) in insuredList"
            :key="index"
          >
            <van-cell :title="item.insuredName" value="" />
            <van-cell
              title="证件类型"
              :value="
                item.insuredCertificateType * 1 === 1
                  ? '身份证'
                  : '统一社会信用代码'
              "
            />
            <van-cell title="证件号码" :value="item.insuredCertificateNumber" />
            <van-row>
              <van-col span="24">
                <div style="float: right; margin: 16px 14px 16px 0">
                  <van-button
                    size="small"
                    type="info"
                    style="margin-right: 5px"
                    @click="editInsured(item)"
                    >编辑</van-button
                  >
                  <van-button size="small" @click="delInsured(item)"
                    >删除</van-button
                  >
                </div>
              </van-col>
            </van-row>
          </van-cell-group>
          <van-empty
            v-if="!insuredList.length"
            image="search"
            description="暂无数据"
          />
        </van-tab>
      </van-tabs>
    </van-pull-refresh>
    <van-dialog
      v-model="insuredShow"
      :title="insuredTitle"
      :showConfirmButton="false"
      :showCancelButton="false"
      show-cancel-button
    >
      <van-form @submit="onSubmit">
        <van-field
          v-model="insuredName"
          required
          label="被保险人名称"
          placeholder="请输入被保险人名称"
          :rules="[{ required: true, message: '请输入被保险人名称' }]"
        />
        <van-field
          readonly
          clickable
          required
          :rules="[{ required: true, message: '请选择证件类型' }]"
          name="picker"
          :value="insuredCertificateType"
          label="证件类型"
          placeholder="点击选择"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns.map((item) => item.label)"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
        <van-field
          v-model="insuredCertificateNumber"
          required
          label="证件号码"
          placeholder="请输入证件号码"
          :rules="[
            { required: true, message: '请输入证件号码' },
            {
              validator: (value, rule) => checkDocument(value, rule),
              message: '请输入正确的证件号码',
            },
          ]"
        />

        <div style="margin: 16px 0; padding: 16px">
          <van-button
            style="margin-bottom: 10px"
            block
            type="info"
            native-type="submit"
            >提交</van-button
          >
          <van-button native-type="button" block @click="onInsuredCancel">取消</van-button>
        </div>
      </van-form>
    </van-dialog>
    <van-dialog
      v-model="showDel"
      title="确认删除?"
      @confirm="delConfirm"
      show-cancel-button
    >
    </van-dialog>
  </div>
</template>
  
<script>
const reg =
  /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i;
const reg2 = /^[0-9A-Z]{18}$/;
import { documentType } from "@/utils/options";
import { getLabel } from "@/utils/func";
export default {
  name: "home",
  data() {
    return {
      isLoading: true,
      insuredId: "",
      showPicker: false,
      insuredTitle: "新增被保险人",
      columns: documentType,
      insuredName: "",
      insuredCertificateType: "",
      insuredCertificateNumber: "",
      applicantList: [],
      insuredList: [],
      active: 0,
      value: "",
      showAction: false,
      insuredShow: false,
      showDel: false,
      row: {},
    };
  },
  methods: {
    delInsure(item) {
      this.row = item
      this.showDel = true;
    },
    delInsured(item) {
      this.row = item
      this.showDel = true;
    },
    delConfirm() {
      if (this.active === 0) {
        this.$post("/config/insure/remove", { insureId: this.row.insureId }).then((res) => {
          this.$toast({
            message: "删除成功",
            duration: 800,
          });
          this.showDel = false;
          this.getApplicantList();
        });
      } else {
        this.$post("/config/insured/remove", { insuredId: this.row.insuredId }).then((res) => {
          this.$toast({
            message: "删除成功",
            duration: 800,
          });
          this.showDel = false;
          this.getInsuredList();
        });
      }
    },
    onInsuredCancel() {
      this.insuredShow = false;
    },
    onConfirm(insuredCertificateType) {
      this.insuredCertificateType = insuredCertificateType;
      this.showPicker = false;
    },
    editInsured(item) {
      this.insuredId = item.insuredId;
      this.insuredShow = true;
      this.insuredTitle = "编辑被保险人";
      this.insuredName = item.insuredName;
      this.insuredCertificateType = item.insureCertificateType = getLabel(
        documentType,
        item.insuredCertificateType * 1
      );
      this.insuredCertificateNumber = item.insuredCertificateNumber;
    },
    checkDocument(value, rule) {
      if (this.insureCertificateType === "身份证") {
        return reg.test(value);
      }
      return reg2.test(value);
    },
    toEditAccount(item) {
      item.insureCertificateType = getLabel(
        documentType,
        item.insureCertificateType * 1
      );
      localStorage.setItem("applicant", JSON.stringify(item));
      this.$router.push("/addApplicant");
    },
    onClickRight() {
      if (this.active === 0) {
        localStorage.removeItem("applicant");
        this.$router.push("/addApplicant");
      } else {
        this.insuredId = "";
        this.insuredShow = true;
        this.insuredTitle = "新增被保险人";
        this.insuredName = "";
        this.insuredCertificateType = "";
        this.insuredCertificateNumber = "";
      }
    },
    onClickLeft() {
      const url = window.location.href
        if (url.includes('showInsured')) {
          this.$router.push(`/tempInput?insureInfoId=${this.$route.query.insureInfoId}&templateName=${this.$route.query.templateName}&getInsuredDataFromCache=true`);
        } else {
          this.$router.push("/personCenter");
        }
    },
    onSearch() {
      this.$toast(this.value);
    },
    onFocus() {
      this.showAction = true;
    },
    onCancel() {
      this.showAction = false;
    },
    changeOrderClick() {
      this.$router.push("/changeOrder");
    },
    reportCaseClick() {
      this.$router.push("/reportCase");
    },
    delClick() {
      this.showDel = true;
    },
    detallClick() {
      this.$router.push("/reportCase");
    },
    onRefresh() {
      if (this.active === 0) {
        this.getApplicantList();
      } else {
        this.getInsuredList();
      }
    },
    getApplicantList() {
      this.$get("/config/insure/list").then((res) => {
        this.applicantList = res.data;
        this.isLoading = false;
      });
    },
    getInsuredList() {
      this.$get("/config/insured/list").then((res) => {
        this.insuredList = res.data;
        this.isLoading = false;
      });
    },
    onSubmit() {
      const { insuredName, insuredCertificateType, insuredCertificateNumber } =
        this;
      const params = {
        insuredName,
        insuredCertificateType: documentType.find(
          (item) => item.label === insuredCertificateType
        ).value,
        insuredCertificateNumber,
      };
      const url = this.insuredId
        ? "/config/insured/update"
        : "/config/insured/add";
      if (this.insuredId) {
        params.insuredId = this.insuredId;
      }
      const message = this.insuredId ? "编辑成功" : "新增成功";
      this.$post(url, params).then((res) => {
        this.$toast({
          message,
          duration: 800,
        });
        const url = window.location.href
        if (url.includes('showInsured')) {
          this.$router.push(`/tempInput?insureInfoId=${this.$route.query.insureInfoId}&templateName=${this.$route.query.templateName}&getInsuredDataFromCache=true`);
        }
        this.insuredShow = false;
        this.getInsuredList();
      });
    },
  },
  mounted() {
    this.getApplicantList();
    this.getInsuredList();
    if (this.$route.query.showInsured) {
      this.active = 1
      this.insuredShow = true
    }
  },
};
</script>
<style scoped>
.home {
  background-color: #f5f5f5;
}

.title {
  margin: 1em;
  font-size: 1.5em;
}

.van-submit-bar {
  bottom: 16rem !important;
}
</style>